<template>
    <div>

        <div style="margin-bottom:5px;">
            <el-input v-model="name" placeholder="请输入名字" style="width:200px;" @keyup.enter.native="loadPost"></el-input>
            

            <el-button type="primary" style="margin-left:5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>

        </div>
        <el-table :data="tableData"
            :header-cell-style="{background: '#f3f6fd',color:'#555'}">
            <!-- <el-table-column prop="id" label="ID" width="120">
            </el-table-column> -->
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="100">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.sex === 1 ? 'primary' : 'danger'"
                    disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="200">
            </el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="100">
            </el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="200">
            </el-table-column>
            <el-table-column prop="height" label="身高cm" width="100">
            </el-table-column>
            <el-table-column prop="weight" label="体重kg" width="100">
            </el-table-column>
            <el-table-column prop="blood" label="血型" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间" width="200">
            </el-table-column>
            
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定删除" @confirm="del(scope.row.id)" style="margin-left:5px;">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>
        <!-- form表单 -->
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-col :span="20">
                        <el-date-picker v-model="form.birthday"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-col :span="20">
                        <el-input v-model="form.idCard"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="身高cm" prop="height">
                    <el-col :span="20">
                        <el-input v-model="form.height"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="体重kg" prop="weight">
                    <el-col :span="20">
                        <el-input v-model="form.weight"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="血型" prop="blood">
                    <el-col :span="20">
                        <el-input v-model="form.blood"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ApiService from "@/apiService";

export default {
    name: 'PatientManger',

    data() {
        return {
            tableData: [],
            pageSize:5,
            pageNum:1,
            total:0,
            name:'',
            centerDialogVisible:false,
            form:{
                id:'',
                name:'',
                birthday:'',
                sex:'0',
                phone:'',
                idCard:'',
                height:'',
                weight:'',
                blood:'',
            },
            rules:{

            }

        }
    },

    methods:{
        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm() 
                this.form.id = ''})
        },

        mod(row){
            console.log(row)
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.form.id = row.id
                this.form.name = row.name
                this.form.birthday = row.birthday+''
                this.form.sex = row.sex+''
                this.form.phone = row.phone
                this.form.idCard = row.idCard
                this.form.height = row.height
                this.form.weight = row.weight
                this.form.blood = row.blood
            })
        },

        async loadPost(){
            const response = await ApiService.post('/patient/listPage', {pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    param:{
                        name:this.name,
                    }
            });

            if(response.code===200){
                this.tableData=response.data
                this.total=response.total
            }else{
                alert('获取数据失败')
            }
        },


        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    this.saveOrUpdate();
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });
        },

        async saveOrUpdate(){
            const response = await ApiService.post('/patient/update', this.form);

            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },
        //删除功能
        async del(id){
            const response = await ApiService.get('/patient/del?id='+id);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.loadPost()
            }else{
                this.$message({message:response.msg,type:'error'})
            }
        },


        resetForm(){
            this.$refs.form.resetFields();
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1
        this.pageSize=val
        this.loadPost()
        },

        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val
        this.loadPost()
        },

        resetParam(){
            this.name='';
        },


    },


    beforeMount(){
       
        this.loadPost()
    }
    

  
}
</script>


<style scoped>

</style>
